.box {
    width: 100vw;
    height: 100vh;
}

.icon {
    width: 36rpx;
    height: 36rpx;
    transform: rotate(90deg);
}

.swiper {
    width: 100vw;
    height: 100vh;
}

.banner-box {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.box1 {
	// background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager6bed772c-00a3-43af-b05f-1eb02b5b45ef.png");
	background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerbbcaf036-7d8c-4337-8906-64aeebfcd38d.png");
	background-size: 750rpx 100%;
	background-position: center;;
    background-repeat: no-repeat;
}

.box2 {
	background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager55f0e03f-8470-414b-b5e5-aea860d774bc.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

.box3 {
	background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagere64bcf54-19d1-4ef7-9a4e-7a27438c2902.png");
    background-size: 100%;
    background-repeat: no-repeat;
}
.box4 {
	background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerb312db2b-0afc-4b94-813b-7050cdc95c8c.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

.box5 {
    background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager87fac36e-905b-4446-9e0a-96dc891de77b.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

.box6 {
    background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerf168ae29-39f0-4353-aded-e36492d6dde3.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

.box7 {
    background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager5ada5b02-3f75-47c7-bda0-29c66d65365b.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

.box8 {
    position: relative;
    background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerda64f688-5e84-4ab2-b4fd-6c10cb7eb239.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

.box7inner {
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx 60rpx 0;

    .boxinfo {
        position: relative;
        padding: 1vh 30rpx 5vh;
        width: 100%;
        box-sizing: border-box;
        border-radius: 24rpx;
        border: 4rpx solid #4cf9ff;
        background: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.5);
    }
}

.content {
    width: 100vw;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 86rpx;

    .line {
        width: 500rpx;
        height: 4rpx;
        margin-bottom: -56rpx;
        opacity: 1;
        background: linear-gradient(270deg, #FFCE2E 0%, #FFCE2E 87%, #EA4155 97%);
    }

    .hb {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40rpx;
        margin-bottom: 20rpx;

        .hbimg {
            width: 112rpx;
            height: 112rpx;
        }
    }

    .text {
        color: #014C70;
        font-size: 28rpx;
    }

    .bord {
        font-weight: 900;
        font-size: 36rpx;
    }


    .shardo {
        margin-top: 10rpx;
        margin-bottom: 32rpx;
        width: 320rpx;
        height: 10rpx;
        background: rgba(4, 169, 254, 0.4);
        filter: blur(6.5px);
    }

    .btn {
        width: 452rpx;
        height: 114rpx;
        border-radius: 20rpx;
        background: linear-gradient(180deg, #00A7FE 0%, #2BBBFE 99%);
        color: #ffffff;
        font-size: 48rpx;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.ymgbox {
    margin-top: 80rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
}

.yinpin {
    width: 36rpx;
    height: 32rpx;
}

.innercontent {
    font-size: 32rpx;
    color: #014C70;
    line-height: 54rpx;

    .w {
        font-weight: 900;
        font-family: Heavy;
    }
}

.title {
    color: #014C70;
    font-size: 56rpx;
    font-weight: 900;
    margin-bottom: 34rpx;
    font-family: Heavy;
}
.fm-heavy {
    font-family: Heavy;
}
.bw {
    font-family: Heavy;
}

.textbox {
    margin-top: 56rpx;
    width: 100%;
    box-sizing: border-box;
	padding-left: 84rpx; 
	position: relative;
	z-index: 1000;
	opacity: 0;
}

.fs20 {
    font-size: 40rpx;
}

.fs28 {
    font-size: 56rpx;
}

.fs16 {
    font-size: 32rpx;
}

.darkblue {
    color: #014C70;
}

.mb10 {
    margin-bottom: 20rpx;
}

.mb20 {
    margin-bottom: 40rpx;
}

.alcenter {
    text-align: center;
}

.fw900 {
    font-weight: 900;
}

.zwgzsjbox {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 1vh;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .l {
        font-size: 32rpx;
        font-weight: 900;
        color: #FF884F;
    }

    .r {
        display: flex;
        align-items: center;

        .num {
            width: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 80rpx;
            border-radius: 16rpx;
            background-color: #FF884F;
            color: #ffffff;
            font-size: 62rpx;
            font-weight: 900;
        }

        .mh {
            margin: 0 4rpx;
            font-size: 56rpx;
            color: #FF884F;
        }
    }
}

.smallbox {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #A2DFFF 0%, #CAFFFB 100%);
    padding: 2vh 0;
    border-radius: 16px;

    .smallitemc {
        padding: 0 28rpx;
        color: #014C70;
        font-size: 32rpx;
    }

    .smallitem {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .lable {
            width: 40%;
            font-size: 32rpx;
            color: #014C70;
            text-align: end;
            margin-right: 24rpx;
        }

        .lablecontent {
            width: 55%;
            text-align: start;
            font-weight: 900;
            font-size: 44rpx;
            color: #014C70;
        }
    }
}

.enterbtnbox {
    position: absolute;
    left: 0;
    bottom: -58rpx;
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .enterbtn {
        width: 80%;
        height: 100%;
        font-size: 48rpx;
        color: #ffffff;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #00A7FE 0%, #2BBBFE 99%);
        border-radius: 20px;
    }
}

.box8btnbox {
    position: absolute;
    bottom: 20vh;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 52rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn1 {
        width: 312rpx;
        height: 104rpx;
        background: linear-gradient(180deg, #00A7FE 0%, #2BBBFE 99%);
        border-radius: 388rpx;
        color: #ffffff;
        font-size: 36rpx;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn2 {
        width: 312rpx;
        height: 104rpx;
        background: linear-gradient(179deg, #FF642D 3%, #FFAD80 95%);
        border-radius: 388rpx;
        color: #ffffff;
        font-size: 36rpx;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.hint {
    color: #09ABFE;
    font-size: 28rpx;
    text-align: center;
    margin-bottom: 20rpx;
}

.mg-t-40 {
    margin-top: 30rpx;
}

.loading {
    width: 100vw;
    background: linear-gradient(160deg, #BFE1F9 2%, #C1CAEA 23%, #8ACAFF 40%, #ECF9FA 87%);
    height: 100vh;
}

.animation-box {
    position: absolute;
    width: 214rpx;
    height: 330rpx;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
}

.progress-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 450rpx;
}

.animate-main {
    width: 214rpx;
    height: 330rpx;
    position: relative;
    z-index: 5;
    animation: shark 0.5s linear infinite alternate;
}

.cloud-1 {
    width: 48rpx;
    height: 36rpx;
    position: absolute;
    right: -40rpx;
    top: 160rpx;
    animation: shark2 0.3s linear infinite alternate;
    animation-delay: 0.3s;
}

.cloud-2 {
    width: 48rpx;
    height: 36rpx;
    position: absolute;
    left: -40rpx;
    top: 170rpx;
    animation: shark3 0.3s linear infinite alternate;
    animation-delay: 0.5s;
}

.rocket {
    width: 72rpx;
    height: 48rpx;
    position: absolute;
    left: -40rpx;
    bottom: 3rpx;
    animation: rocket 0.5s ease-out infinite alternate;
    // animation-delay: 0.2s;
    transform-origin: right 20rpx;
}

.star {
    width: 10rpx;
    height: 17rpx;
    position: absolute;
    right: -0rpx;
    top: 80rpx;
    animation: scale 0.5s ease-out infinite alternate;
}

@keyframes shark {
    0% {
        transform: translateY(6rpx);
    }

    100% {
        transform: translateY(-6rpx);
    }
}

@keyframes shark2 {
    0% {
        transform: translateY(2rpx);
    }

    100% {
        transform: translateY(-2rpx);
    }
}

@keyframes shark3 {
    0% {
        transform: translateY(2rpx) scale(0.7);
    }

    100% {
        transform: translateY(-2rpx) scale(0.7);
    }
}

@keyframes rocket {
    0% {
        transform: rotateZ(5deg) translateY(3rpx);
    }

    100% {
        transform: rotateZ(-5deg) translateY(-3rpx);
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.5);
    }
}

.bottomhb {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
}
.car-box {
	position: absolute;
	bottom: 30vh;
	left: -60rpx;
	opacity: 0;
}
.car-move {
	opacity: 1;
	animation: carmove 3s linear;
}
.icon-car {
	width: 440rpx;
	height: 233rpx;
	animation: carjump 1s linear infinite alternate;
	position: relative;
	z-index: 10;
}
.icon-whale1 {
	width: 86rpx;
	height: 86rpx;
	position: absolute;
	left: 26rpx;
	bottom: -32rpx;
	animation: roll linear 0.5s infinite;
}
.icon-whale2 {
	width: 86rpx;
	height: 86rpx;
	position: absolute;
	left: 264rpx;
	bottom: -32rpx;
	animation: roll linear 0.5s infinite;
}
@keyframes roll {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes carmove {
	0% {
		transform: translateX(-440rpx);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes carjump {
	0%{ 
		transform: translateY(0);
	}
	50%{
		transform: translateY(4rpx);
	}
	100%{ 
		transform: translateY(0);
	}
}
.time-box{
	position: absolute;
	width: 100%;
	height: 100%;
	right: 0;
	top: 80vw;
}
.icon-ip {
	width: 100%;
	height: 678rpx;
	position: relative;
	z-index: 10;
}
.icon-wave {
	width: 324rpx;
	height: 230rpx;
	position: absolute;
	left: 2rpx;
	top: 300rpx;
}
.card-box {
	position: absolute;
	right: 0;
	top: 50vw;
	width: 100%;
	opacity: 0;
	// perspective: 800rpx;
	// perspective-origin: 50rpx 425rpx;
}
.icon-card {
	width: 232rpx;
	height: 210rpx;
	position: absolute;
	top: 680rpx;
	left: 0;
	// opacity: 0;
}

.icon-card-ip {
	width: 100vw;
	height: 774rpx;
	position: absolute;
	right: 0;
	top: 0;
	animation: cardMove 1s linear;
}
@keyframes cardMove {
	0%{
		right: -100vw;
	}
	100% {
		right: 0;
	}
}



.insure-box {
	position: absolute;
	right: 20vw;
	top: 60vw;
}
.icon-insure {
	width: 334rpx;
	height: 242rpx;
	position: relative;
	z-index: 10;
}
.icon-sheld {
	position: absolute;
	left: 140rpx;
	top: -148rpx;
	width: 260rpx;
	height: 298rpx;
	animation: sheldShark 0.5s linear infinite alternate;
}
.insure {
	position: absolute;
	left: 140rpx;
	top: -170rpx;
	width: 260rpx;
	height: 320rpx;
	animation: sheldShark 0.5s linear infinite alternate;
}
@keyframes sheldShark {
	0% {
		transform: translateY(2rpx);
	}
	100% {
		transform: translateY(-2rpx);
	}
}
.check-box {
	position: absolute;
	right: 10vw;
	bottom: 50vw;
}
.icon-check {
	width: 390rpx;
	height: 429rpx;
}
.check {
	position: absolute;
	left: 100rpx;
	top: -80rpx;
	width: 160rpx;
	height: 160rpx;
}
.bar-box {
	position: absolute;
	right: 90rpx;
	top: 80rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	transform: rotate(3deg);
}
.bar-1 {
	width: 100rpx;
	height: 20rpx;
	background: #FD8F6A;
	border-radius: 10rpx;
	margin-right: -10rpx;
	animation: extendMove1 1.3s linear infinite;
	animation-delay: 3s;
}
.bar-2 {
	width: 80rpx;
	height: 20rpx;
	background: #FD8F6A;
	border-radius: 10rpx;
	margin-top: 20rpx;
	margin-right: -5rpx;
	animation: extendMove2 1.3s linear infinite;
	animation-delay: 3s;
}
.bar-3 {
	width: 100rpx;
	height: 20rpx;
	background: #FD8F6A;
	border-radius: 10rpx;
	margin-top: 20rpx;
	animation: extendMove3 1.3s linear infinite;
	animation-delay: 3s;
}
.bar-4 {
	width: 100rpx;
	height: 20rpx;
	background: #FD8F6A;
	border-radius: 10rpx;
	margin-top: 20rpx;
	opacity: 0;
}
@keyframes extendMove1 {
	0%{
		width: 0%;
	}
	33% {
		width: 100%;
	}
	100% {
		width: 100%;
	}
}
@keyframes extendMove2 {
	0%{
		width: 0%;
	}
	33% {
		width: 0%;
	}
	66% {
		width: 80%;
	}
	100% {
		width: 80%;
	}
}
@keyframes extendMove3 {
	0%{
		width: 0%;
	}
	66% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}
.happy-box {
	position: absolute;
	right: 15vw;
	bottom: 50vw;
}
.icon-happy {
	width: 283rpx;
	height: 261rpx;
	position: relative;
	z-index: 10;
}
.icon-time {
	width: 1083rpx;
	height: 440rpx;
	position: absolute;
	left: -350rpx;
	top: 0;
}
.star-1 {
	position: absolute;
	left: 20vw;
	top: 20vw;
	width: 40rpx;
	height: 50rpx;
	animation: twinkle 0.5s linear infinite alternate;
}
.star-2 {
	position: absolute;
	left: 10vw;
	top: 40vw;
	width: 20rpx;
	height: 25rpx;
	animation: twinkle 0.5s linear infinite alternate;
	animation-delay: 0.7s;
}
.star-3 {
	position: absolute;
	left: 30vw;
	top: 50vw;
	width: 20rpx;
	height: 25rpx;
	animation: twinkle 0.5s linear infinite alternate;
	animation-delay: 1s;
}

.star-4 {
	position: absolute;
	right: 30vw;
	top: 30vh;
	width: 89rpx;
	height: 103rpx;
	animation: twinkle 0.5s linear infinite alternate;
	animation-delay: 0.5s;
}

.star-5 {
	position: absolute;
	left: 30vw;
	top: 60vh;
	width: 89rpx;
	height: 103rpx;
	animation: twinkle 0.5s linear infinite alternate;
	animation-delay: 0.7s;
}
@keyframes twinkle {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.2);
	}
}

.direction {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 20vh;
	display: flex;
	align-items: center;
	z-index: 50;
}
.icon-left {
	width: 50rpx;
	height: 50rpx;
	margin-right: 20rpx;
	animation: leftMove 0.5s linear infinite alternate;
}
.text {
	font-size: 32rpx;
	color: #014C70;
}
@keyframes leftMove {
	0% {
		transform: translateX(-4rpx);
	}
	100% {
		transform: translateX(4rpx);
	}
}
.show {
	opacity: 1;
}